<template>
	<view class="container">
		<view class="status-bar"/>
		
		<myp-toast ref="myp-toast"></myp-toast>
		
		<view class="chat-heads">
			<img src="" alt="">
		</view>
		
		
		<view class="login-form">
			<form @submit="doLogin" @reset="doReset">
				<input  v-model="userAccount" type="text"  class="login-input"  placeholder="请输入用户名" />
				<input  v-model="userPassword" type="password"  class="login-input" placeholder="请输入密码"/>
				
				<view style="display: flex;">
					<button form-type="submit" class="login-btn">登录</button>
					<button form-type="reset" class="login-btn">重置</button>
				</view>				
			</form>
			
		</view>
	</view>
</template>

<script>
	import toastMixin from '@/mypUI/myp-mixin/toastMixin.js'
	export default {
		mixins: [toastMixin],
		data() {
			return {
				userAccount: '834784900',
				userPassword: '123456',
				popType: 'success',
				popmessage: '',
				popshow: 'false'
			}
		},
		methods: {
			doReset() {
				this.userAccount = '';
				this.userPassword = '';
			},
			doLogin() {
				uni.request({
				    url: this.baseUrl + '/cim/server/user/dologin', //仅为示例，并非真实接口地址。
				    data: {
				        'userAccount': this.userAccount,
						'userPassword': this.userPassword
				    },
					method: 'POST',
					timeout: 3000,
				    header: {
				        'Content-Type': 'application/json' ,//自定义请求头信息
				    },
				    success: (res) => {
						console.log(res);
						const data = res.data;
						if(res.data.status == 200) {
							this.mypShowToast({
							text: data.msg,
							type: 'success',
							mode: 'small',
							pos: 'top',
							offset: 'nav-status'});
							try {
							    uni.setStorageSync('user', data.datamap.user);
							} catch (e) {
							    console.info(e)
							}
							setTimeout(1000);
							this.$Router.replaceAll({name: "home"});
						} else {
							this.mypShowToast({
							text: data.msg,
							type: 'error',
							mode: 'small',
							pos: 'top',
							offset: 'nav-status'})
						}
				    },
					fail: (res) => {
						console.info(res);
					}
				});
			}
			
		},
		created() {
			
		}
	}
	
</script>

<style>
	@import url("../../static/global.css");
	
	.login-form {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.login-input {
		width: 600rpx;
		height: 100rpx;
		border: 1px solid #333333;
		border-radius: 30rpx;
		margin: 50rpx;
	}
	.login-btn {
		width: 200rpx;
	}
	
</style>
